<template>
    <div class="access-control">
        <div class="access-control-title">
            <div class="title">门禁</div>
            <img src="@/assets/images/bigScreen/line1.png" alt="行为识别安全" class="title-img" />
        </div>
        <div class="access-control-content">
            <div class="access-control-item" v-for="(item, index) in accessList" :key="item.id">
                <div class="access-control-item-img" @click="openTheDoor(item)">
                    <img src="@/assets/images/bigScreen/access.png" alt="" width="32px" height="32px">
                </div>
                <div class="access-control-item-name">{{ item.eqName }}</div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { getAllAccess, openAccess } from '@/api/bigScreen/bigScreen.api'


interface accessDevice {
    id: string;
    eqId: number;
    eqName: string;
    eqStatus: number;
}

const accessList = ref<accessDevice[]>([])
async function getAccessList() {
    try {
        const res = await getAllAccess()
        if (res.code === 200) {
            accessList.value = res.result
        }
    } catch (error) {
        if (error instanceof Error) {
            ElMessage.error(error.message)
        }
    }
}

onMounted(() => {
    getAccessList()
})

async function openTheDoor(payload: accessDevice) {
    try {
        const res = await openAccess(payload.id)
        // ElMessage.success('门已打开')
    } catch (error) {

    }
}

</script>

<style lang="scss" scoped>
.access-control {
    height: 100%;
    width: 100%;
    padding: 1px;
    background-image: url('@/assets/images/light_bg2.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;

    .access-control-title {
        height: 15%;
        padding: 0 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .title {
            font-weight: bold;
            color: darkturquoise;
        }

        .title-img {
            width: 30%;
            height: 50%;
        }
    }

    .access-control-content {
        height: 85%;
        width: 100%;
        padding: 5px;
        display: flex;
        justify-content: center;
        align-items: center;

        .access-control-item {
            width: 100%;
            height: 100%;
            margin-right: 15px;

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            &-img {
                background-color: rgb(19, 163, 224);
                width: 48px;
                height: 48px;
                border-radius: 50%;

                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
            }

            &-name {
                font-size: 12px;
                margin-top: 10px;
            }
        }

    }
}
</style>